<template>
	<view class="unio2o-page-has-bg">
	<view class="unio2o-jb-bg"></view>
	
	<view class="unio2o-coupon-detail unio2o-main">
		<view class="coupon-box bg-w box-shadow bdr16 pb40">
			<image class="logo" :src="''"></image>
			<image class="coupon-type" :src="''"></image>
			<view class="coupon-main">
				<view class="ft14 text-center text-main">
					我要有异业联盟
				</view>
				<view class="mt30 text-center text-main ft24 ftw600">10元美食通用优惠券</view>
				
				<view v-if="status == 0"  class="flex alcenter space mt30">
					<navigator url="/pages/coupon/send">
						<view class="btn-send ft18 text-main ftw600 text-center">赠送好友</view>
					</navigator>
					<view class="btn-use ft18 text-theme ftw600 text-center">去使用</view>
				</view>
				
				<view v-if="status == 1" class="mt30">
					<button class="btn-dis ft18 ftw600 text-w">已经使用</button>
				</view>
				<view v-if="status == 2" class="mt30">
					<button class="btn-dis ft18 ftw600 text-w">申请退款中</button>
				</view>
				<view v-if="status == 3" class="mt30">
					<button class="btn-dis ft18 ftw600 text-w">已经退款</button>
				</view>
			</view>
			<view class="coupon-line mt30"><image :src="''"></image></view>
			
			<view class="plr40 mt30">
				
				<view class="mb30 text-center" :class="status != 0 ?'opacity2' :'' ">
					<image class="qrcode-img big" :src="''"></image>
					<view class="mt30 ft14 text-notice">
						线下使用请出示二维码给商家扫码销券
					</view>
				</view>
				
				<view class="flex wrap">
					<view @click="showRole = true" class="coupon-tag-type mr20 mb30">购买套餐抵扣 <text class="iconfont iconbtn_question ml10"></text></view>
					<view @click="showRole = true" class="coupon-tag-type mr20 mb30">商户线下核销使用 <text class="iconfont iconbtn_question ml10"></text></view>
					<view @click="showRole = true" class="coupon-tag-type mr20 mb30">优惠买单使用 <text class="iconfont iconbtn_question ml10"></text></view>
				</view>
				<unio2o-coupon-alert @closed="showRole = false" :show="showRole"></unio2o-coupon-alert>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						使用期限
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						2019.08.01 ~ 2020.08.01
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						退订规则
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						付费券过期自动退款到余额
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						券类型
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						异业联盟平台券
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						使用条件
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						满100可用
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						使用时间
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						09:00-20:00，周一至周日可用
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						使用说明
					</view>
					<text class="coupon-r pl10 ft16 text-info pl20">
						美食类消费可使用该优惠券，勾选即可抵扣相应消费金额。
						
						该优惠券只可在活动期间使用，不接受现金兑换；不可叠加使用
						
						不限本人使用，可赠送好友。
					</text>
				</view>
			</view>
		</view>
	</view>
	
		<view v-if="isBuy && status == 0"  class="unio2o-coupon-footer-h">
			
			<view class="unio2o-coupon-footer box-shadow-top bg-w flex center alcenter">
				<view @click="status = 2" class="btn-refund ft18 ftw600 text-main flex center alcenter">申请退款</view>
			</view>
		</view>
	
	
	</view>
</template>

<script>
	import unio2oCouponAlert from '@/components/module/coupon/roleAlert.vue';
	export default{
		components:{
			unio2oCouponAlert
		},
		data(){
			return {
				showRole:false,
				status:0, // 1 已经使用 2申请退款 3退款完成  拒绝就直接返回状态0
				isBuy:true, //花钱买的
			}
		}
	}
</script>

<style>
	.unio2o-coupon-footer-h{
		height: calc(140rpx + env(safe-area-inset-bottom));
	}
	.unio2o-coupon-footer{
		height: calc(140rpx + env(safe-area-inset-bottom));
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 100;
	}
	
	.unio2o-coupon-footer .btn-refund{
		width:690rpx;
		height:96rpx;
		background:#FFFFFF;
		border-radius:48rpx;
		border:2rpx solid #CCCCCC;
	}
	
	.unio2o-coupon-detail .btn-send,.unio2o-coupon-detail .btn-use{
		width: 270rpx;
		height: 96rpx;
		border-radius: 48rpx;
		border:2rpx solid #CCCCCC;
		line-height: 92rpx;
	}
	.unio2o-coupon-detail .btn-use{
		border-color: #FF6D00;
	}
	.unio2o-coupon-detail{
		padding:80rpx 30rpx  80rpx 30rpx  ;
	}
	.unio2o-coupon-detail .coupon-box{
		position: relative;
		min-height: 1000rpx;
	}
	.unio2o-coupon-detail .coupon-box .logo{
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		box-shadow:0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06);
		border:4rpx solid #FFFFFF;
		position: absolute;
		left: calc(50% - 80rpx);
		top:-40rpx;
	}
	.unio2o-coupon-detail .coupon-type{
		position: absolute;
		left: 0;
		top: 0;
		width: 100rpx;
		height: 100rpx;
	}
	.unio2o-coupon-detail .coupon-main{
		padding-top: 142rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
	}
	.unio2o-coupon-detail .coupon-line{
		height: 34rpx;
		width: 100%;
	}
	.unio2o-coupon-detail .coupon-line image{
		height: 34rpx;
		width: 100%;
	}
	.unio2o-coupon-detail .coupon-tag-type{
		font-size: 28rpx;
		padding: 8rpx 20rpx;
		color:#FF6D00;
		border-radius: 28rpx;
		border:2rpx solid #FF6D00;
	}
	.unio2o-coupon-detail .coupon-l{
		width: 140rpx;
	}
	.unio2o-coupon-detail .coupon-r{
		width: calc(100% - 140rpx);
	}
</style>